<script type="text/javascript">
  //Note that you have to require "dojo.fx" to use the wipe methods.
  //These are not included in the base.
  dojo.require("dojo.fx");

  var fadeOut = dojo.fadeOut({node: "animDiv",duration: 1000});
  var fadeIn = dojo.fadeIn({node: "animDiv",duration: 1000});
  var wipeOut = dojo.fx.wipeOut({node: "animDiv",duration: 1000});
  var wipeIn = dojo.fx.wipeIn({node: "animDiv",duration: 1000});
  var slideRight = dojo.fx.slideTo({node: "animDiv",duration: 1000, left: 300, top: 80});
  var slideLeft = dojo.fx.slideTo({node: "animDiv",duration: 1000, left: 0, top:80});
  
  var animOut = dojo.fx.combine([fadeOut, wipeOut, slideRight]);
  var animIn = dojo.fx.combine([fadeIn, wipeIn, slideLeft]);

  var currentAnimation;

  function doAnimation(index) {
    switch(index) {
      case 1:
        currentAnimation = animOut;
        break;
      case 2:
        currentAnimation = animIn;
        break;
      case 3:
        //Chain two animations to run in sequence.
        //Note the array passed as an argument.
        currentAnimation = dojo.fx.chain([slideRight, wipeOut, wipeIn, slideLeft]);
        break;
    }
    //Play the animation. Without this call, it will not run.
    currentAnimation.play();
  }

  function pauseAnimation(){
    if(currentAnimation && currentAnimation.status() == "playing"){
      currentAnimation.pause();
    }
  }
  function resumeAnimation(){
    if(currentAnimation && currentAnimation.status() == "paused"){
      currentAnimation.play();
    }
  }
</script>
<style type="text/css">
  .box {
    margin-top: 10px;
    color: #292929;
    width: 300px;
    position: absolute;
    top: 80px;
    border: 1px solid #BABABA;
    background-color: #ddd;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 10px;
    margin-bottom: 1em;
    -o-border-radius: 10px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 10px;
    -webkit-box-shadow: 0px 3px 7px #adadad;
    border-radius: 10px;
    -moz-box-sizing: border-box;
    -opera-sizing: border-box;
    -webkit-box-sizing: border-box;
    -khtml-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
  }
</style>

<button dojoType="dijit.form.Button" onClick="doAnimation(1);">Fade & Wipe Out & Slide RIght</button>
<button dojoType="dijit.form.Button" onClick="doAnimation(2);">Fade & Wipe In & Slide Left</button>
<button dojoType="dijit.form.Button" onClick="doAnimation(3);">Fade & Wipe Out Then In, Slide Right & Left</button>
<br/>
<button dojoType="dijit.form.Button" onClick="pauseAnimation(2);">Pause</button>
<button dojoType="dijit.form.Button" onClick="resumeAnimation(2);">Resume</button>

<div id="animDiv" class="box">
  <p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
  semper sagittis velit. Cras in mi. Duis porta mauris ut ligula.
  Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla
  facilisi.  Maecenas luctus venenatis nulla. In sit amet dui non mi
  semper iaculis.  Sed molestie tortor at ipsum. Morbi dictum rutrum
  magna. Sed vitae risus.
  </p>
</div>